.app {
  // display: flex;
  overflow: auto;
}

@header-height: 50px;
@viewer-container-width: 80%;
@editor-container-width: 100% - @viewer-container-width;

.operater {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 10px 0;

  select {
    width: 130px;
  }

  input {
    width: 100px;
  }
}

.header {
  position: sticky;
  // position: absolute;
  top: 0;
  width: 100%;

  height: @header-height;
  // background: gray;
}

.content {
  height: calc(100% - @header-height);
  // margin-top: @header-height;
  display: flex;
  overflow: auto;
}

.viewer-container {
  width: @viewer-container-width;
  display: flex;
  flex-direction: column;

  .viewer {
    height: 100%;
    position: relative;

    .info {
      position: absolute;
      right: 0;
      top: 0;
      padding: 10px;
    }

    .info--left {
      left: 0;
      right: auto;
    }

    .legend {
      top: auto;
      right: 0;
      bottom: 0;
      left: auto;
    }
  }
}

.editor-container {
  height: 100%;
  overflow: auto;
  width: @editor-container-width;
}
